<template>
  <div class="hello" style="height: 100vh">
    <h1
      class="bg-green-light green-darkest pattern-diagonal-lines-sm text-pattern fw-800 md-fs-xl3 fs-l5"
    >
      {{ msg }}
    </h1>
    <div class="flex-row margin-top-50">
      <p class="green-darkest flex-1">
        云微科技作为专业从事互联网的运营商，与国内外各大服务商直接合作，以最优质的服务和高性能的产品推荐给广大客户。我们向客户承诺我们的服务和价格优势是同行中的佼佼者，提供专业的建站系统等先进的技术，使企业和个人可以在低风险、低成本、高效率、高保障的前提下建立自己的网络平台，从而大大降低了企业信息化的门槛。
      </p>
      <p class="green-darkest flex-1">
        云微科技推出的每一项服务，都本着客户至上的原则，每一个前进的脚步，都充分体现了对客户的尊重与关怀。正因为如此，我们才能赢得客户，赢得将来。在新世纪里，宿迁在线将会在现有的基础上，为客户提供更全面、更优质的服务!我们希望能够更好地为客户及其产品在国内、国外市场打开知名度。使国内外企业商能迅速地浏览客户网页及信息，为客户带来无限商机。
      </p>
    </div>
    <div class="bottom">
      <span>Copyright © 云微科技（广州）有限公司<a href="https://beian.miit.gov.cn/"> 粤ICP备18079980号-1</a></span>
    </div>
    <div class="custom-shape-divider-top-1633922365">
      <svg
        width="100%"
        height="100%"
        id="svg"
        viewBox="0 0 1440 600"
        xmlns="http://www.w3.org/2000/svg"
        class="transition duration-300 ease-in-out delay-150"
      >
        <defs>
          <linearGradient id="gradient" x1="1%" y1="41%" x2="99%" y2="59%">
            <stop offset="5%" stop-color="#89e08988"></stop>
            <stop offset="95%" stop-color="#8ed1fc88"></stop>
          </linearGradient>
        </defs>
        <path
          d="M 0,600 C 0,600 0,200 0,200 C 187.33333333333331,208 374.66666666666663,216 535,231 C 695.3333333333334,246 828.6666666666667,268 975,264 C 1121.3333333333333,260 1280.6666666666665,230 1440,200 C 1440,200 1440,600 1440,600 Z"
          stroke="none"
          stroke-width="0"
          fill="url(#gradient)"
          class="transition-all duration-300 ease-in-out delay-150 path-0"
        ></path>
        <defs>
          <linearGradient id="gradient" x1="1%" y1="41%" x2="99%" y2="59%">
            <stop offset="5%" stop-color="#89e089ff"></stop>
            <stop offset="95%" stop-color="#8ed1fcff"></stop>
          </linearGradient>
        </defs>
        <path
          d="M 0,600 C 0,600 0,400 0,400 C 155.46666666666664,379.73333333333335 310.9333333333333,359.46666666666664 491,345 C 671.0666666666667,330.53333333333336 875.7333333333333,321.8666666666667 1038,332 C 1200.2666666666667,342.1333333333333 1320.1333333333332,371.06666666666666 1440,400 C 1440,400 1440,600 1440,600 Z"
          stroke="none"
          stroke-width="0"
          fill="url(#gradient)"
          class="transition-all duration-300 ease-in-out delay-150 path-1"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  color: #000000;
}
p {
  margin: 40px 100px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.margin-top-50 {
  margin-top: 50px;
}

.fw-800 {
  font-weight: 800;
}

.green-darkest,
.hover-green-darkest:hover {
  color: #206120 !important;
}

.bg-green-light,
.hover-bg-green-light:hover {
  background-color: #89e089 !important;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 0;
  z-index: 999;
}

@media (min-width: 768px) {
  .md-fs-xl3 {
    font-size: 7rem !important;
  }
}

.fs-l5 {
  font-size: 4rem !important;
}

.custom-shape-divider-top-1633922365 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 187.33333333333331,208 374.66666666666663,216 535,231 C 695.3333333333334,246 828.6666666666667,268 975,264 C 1121.3333333333333,260 1280.6666666666665,230 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  25% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 183.7333333333333,216.13333333333333 367.4666666666666,232.26666666666668 524,236 C 680.5333333333334,239.73333333333332 809.8666666666666,231.06666666666666 958,223 C 1106.1333333333334,214.93333333333334 1273.0666666666666,207.46666666666667 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  50% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 195.59999999999997,192.93333333333334 391.19999999999993,185.86666666666665 535,193 C 678.8000000000001,200.13333333333335 770.8,221.46666666666664 913,225 C 1055.2,228.53333333333336 1247.6,214.26666666666668 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  75% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 151.19999999999993,225.20000000000002 302.39999999999986,250.40000000000003 468,251 C 633.6000000000001,251.59999999999997 813.6000000000001,227.59999999999997 978,215 C 1142.3999999999999,202.40000000000003 1291.1999999999998,201.20000000000002 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  100% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 187.33333333333331,208 374.66666666666663,216 535,231 C 695.3333333333334,246 828.6666666666667,268 975,264 C 1121.3333333333333,260 1280.6666666666665,230 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
}

.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
  0% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 155.46666666666664,379.73333333333335 310.9333333333333,359.46666666666664 491,345 C 671.0666666666667,330.53333333333336 875.7333333333333,321.8666666666667 1038,332 C 1200.2666666666667,342.1333333333333 1320.1333333333332,371.06666666666666 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  25% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 156.2666666666667,382 312.5333333333334,364 466,362 C 619.4666666666666,360 770.1333333333334,374 932,383 C 1093.8666666666666,392 1266.9333333333334,396 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  50% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 180.8,411.4666666666667 361.6,422.93333333333334 521,409 C 680.4,395.06666666666666 818.4000000000001,355.7333333333333 968,350 C 1117.6,344.2666666666667 1278.8,372.1333333333333 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  75% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 143.7333333333333,369.73333333333335 287.4666666666666,339.46666666666664 443,349 C 598.5333333333334,358.53333333333336 765.8666666666668,407.86666666666673 934,423 C 1102.1333333333332,438.13333333333327 1271.0666666666666,419.0666666666666 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  100% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 155.46666666666664,379.73333333333335 310.9333333333333,359.46666666666664 491,345 C 671.0666666666667,330.53333333333336 875.7333333333333,321.8666666666667 1038,332 C 1200.2666666666667,342.1333333333333 1320.1333333333332,371.06666666666666 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
}

a {
  text-decoration:none;
}
</style>
